<template>
  <div class="mainbox">
    <banner></banner>
    <main-content :catname="title">

      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}">{{title}}</dt>
        </dl>
      </div>

      <div class="inner_content" slot="inner_content">
        <div class="page_con">
          <ul class="mall_ul">
            <!--<NoData v-if="flag"></NoData>-->
            <NoData v-if="list.length==0"></NoData>
            <li class="mall_item" v-for="item in list">
              <div class="mall_img"><img style="width: 100%;" :src="item.img"/></div>
              <!--            <div class="mall_img"><img src="../../assets/images/banner/p.jpg" /></div>-->
              <div class="infos">
                <p class="yuan">{{item.price}}</p>
                <p class="name">{{item.title}}</p>
              </div>
              <div class="buy_button">
                <div class="button btn1" style="width: 100%;" @click="showPopup(item.id)">扫码购买</div>
                <!--<div class="button"></div>-->
              </div>
            </li>
          </ul>
        </div>
      </div>

    </main-content>

    <div class="popup" v-show="show">
      <div class="mask"></div>
      <div class="mask_main">
        <div class="qrcode"><img :src="qrcode"/></div>
        <p class="qrcode_tip">请打开微信扫一扫购买</p>
        <div class="close" @click="onClose"><img src="../../assets/images/page/close.png"/></div>
      </div>
    </div>

    <footer-bar></footer-bar>

    <main-menu></main-menu>
  </div>
</template>

<script>
  import Banner from '@/components/bannder/Banner';
  import MainMenu from '@/components/mainmenu/MainMenu';
  import mainContent from '@/components/content/mainContent';
  import footerBar from '@/components/content/footerBar';
  import NoData from '../../components/nodata/NoData'

  export default {
    name: "MallList",
    components: {
      Banner,
      MainMenu,
      mainContent,
      footerBar,
      NoData
    },
    data() {
      return {
        title:'',
        show: false,
        page: 1,
        limit: 1000,
        list: [],
        qrcode: '',
        trade_no: '',
        timer: null,
        menu_bg:'',
        flag:false,
      }
    },

    created() {
      this.menu_bg=this.$util.storage.get("menu_bg");
      console.log('this.$route.query:',this.$route.query.name);
      this.title=this.$route.query.name;
      this.getList();

    },

    methods: {
      getList() {
        let that = this;
        that.$http.get('/api/ScreenkApi/getGoods', {vollege_id:that.$util.vollege_id,page: that.page, limit: that.limit}, r => {
          console.log('商城列表：', r)
          that.list = r.data.data;
          if (r.data.data.length==0){
            that.flag=true;
          }


        })
      },

      showPopup(id) {
        console.log('商品id', id);
        let that = this;
        // pages/goods/goods_detail/goods_detail
        that.$http.get("/api/ScreenkApi/setWxQcde", {page_url: 'pages/goods/goods_detail/goods_detail',vollege_id:that.$util.vollege_id,scene:id}, r => {
          console.log('生成收款码', r)
          that.qrcode = r.data
          //that.qrcode = r.data.qrcode;
          //that.trade_no = r.data.trade_no;

          // that.timer = window.setInterval(() => {
          //    setTimeout(that.checkPay, 0)
          //  },1000)

        });
        this.show = true;
      },

      checkPay() {
        let that = this;
        that.$http.get('/api/ScreenkApi/getOrder', {trade_no: that.trade_no}, r => {
          console.log('支付状态：', r)
          if (r.code == 1) {
            clearInterval(that.timer);
            that.timer = null;
            this.show = false;
            this.$alert(r.info, '支付提示', {
              confirmButtonText: '确定',
              center: true,
              // callback: action => {
              //   this.$message({
              //     type: 'info',
              //     message: ''
              //   });
              // }
            });

          }
        })
      },

      onClose() {
        this.show = false;
        clearInterval(this.timer);
        this.timer = null;
      },

    }
  }
</script>

<style scoped>
  .inner_content {
    box-sizing: border-box;
    overflow-y: scroll;
    padding-top: 60px;
  }

  .page_con {
    padding: 0px !important;
    height: 640px;
    width: 100%;
  }

  .mall_ul {
    overflow: hidden;
    padding-left: 32px;
    margin: 0 auto;
  }

  .mall_item {
    float: left;
    width: 245px;
    height: 325px;
    margin: 10px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, .1);
  }

  .mall_img {
    width: 245px;
    height: 160px;
    overflow: hidden;
  }

  .infos {
    padding: 0 10px 10px;
    border-bottom: 1px solid #f5f5f5;
  }

  .infos .yuan {
    padding-top: 8px;
    font-size: 20px;
    color: #ec5151;
  }

  .infos .name {
    padding-top: 8px;
    font-size: 18px;
  }

  .buy_button .button {
    font-size: 20px;
    float: left;
    height: 50px;
    line-height: 50px;
    width: 122px;
    text-align: center;
  }

  .btn1 {
    color: #fe4b64;
    border-right: 1px solid #f5f5f5;
  }

  .mainbox >>> .el-message-box__content {
    font-size: 24px;
  }
</style>
